<template>
  <div class="about">
    <h3>封装子组件的todolist</h3>
    <add @add="add" />
    <list :list="list" @remove="remove" :num1="num1" :num2="num2" />
  </div>
</template>
<script>
import add from "../components/Add.vue";
import list from "../components/List.vue";
export default {
  data() {
    return {
      list: [
        {
          title: "任务1",
          status: false,
        },
        {
          title: "任务2",
          status: true,
        },
        {
          title: "任务3",
          status: false,
        },
        {
          title: "任务4",
          status: true,
        },
        {
          title: "任务5",
          status: false,
        },
      ],
    };
  },
  components: {
    add,
    list,
  },
  mounted() {
    if (localStorage.getItem("todolist")) {
      this.list = JSON.parse(localStorage.getItem("todolist"));
    }
    //进入页面拿到 存的本地存储来用
  },
  methods: {
    add(title) {
      this.list.push({ title, status: false });
    },
    remove(index) {
      this.list.splice(index, 1);
    },
  },
  computed: {
    // 计算任务数量
    num1() {
      let arr = this.list.filter((item) => {
        return item.status == true;
      });
      return arr.length;
    },
    //已经完成的数量
    num2() {
      let arr = this.list.filter((item) => {
        return item.status == false;
      });
      return arr.length;
    },
    //未完成的数量
  },
  //可以在父组件进行计算 算完后通过父传子传给list子组件接收使用，也可以直接在子组件list中计算

  watch: {
    list: {
      handler(newval) {
        localStorage.setItem("todolist", JSON.stringify(this.list));
      },
      deep: true,
    },
  },
};
</script>
